<template>
    <div class="calendar">
      <div class="calendar-header">
        <button @click="prevMonth">‹</button>
        <span>{{ currentMonthName }} {{ currentYear }}</span>
        <button @click="nextMonth">›</button>
      </div>
      <div class="calendar-grid">
        <div class="calendar-day-name" v-for="day in dayNames" :key="day">{{ day }}</div>
        <div  class="calendar-day"  v-for="(date, index) in daysInMonth" :key="index" :class="{ 'not-current-month': !isCurrentMonth(date) }"  >
          {{ date.getDate() }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        
        currentDay: '', //当前几号
        currentMonth: new Date().getMonth(), // 当前月份（0-11）
        currentYear: new Date().getFullYear(), // 当前年份
        dayNames: ["日", "一", "二", "三", "四", "五", "六"], // 星期名称
        daysInMonth: [], // 当前月的所有日期（包括前后填充）
        daysList:[]
      };
    },
    computed: {
      currentMonthName() {
        const monthNames = [
          'January', 'February', 'March', 'April', 'May', 'June',
          'July', 'August', 'September', 'October', 'November', 'December'
        ];
        return monthNames[this.currentMonth];
      }
    },
    methods: {
      generateDaysInMonth() {
        const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
        const lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
        const startDay = firstDayOfMonth.getDay();
        const totalDays = lastDayOfMonth.getDate();
  
        // 初始化日期数组并填充到本月的第一天所在的星期开始
        this.daysInMonth = Array.from({ length: startDay }, (_, i) => {
          const prevDate = new Date(firstDayOfMonth);
          prevDate.setDate(prevDate.getDate() - i);
          return new Date(prevDate);
        });
  
        // 填充本月的所有日期
        for (let i = 1; i <= totalDays; i++) {
            let dd = new Date(this.currentYear, this.currentMonth, i)
            console.log("dd",dd);
            console.log("dd",this.returnData(dd));

          this.daysInMonth.push(new Date(this.currentYear, this.currentMonth, i));
        }
  
        // 填充到本月的最后一天所在的星期结束
        const endDay = lastDayOfMonth.getDay();
        for (let i = 1; i < 7 - endDay; i++) {
          const nextDate = new Date(lastDayOfMonth);
          nextDate.setDate(nextDate.getDate() + i);

          console.log("nextDate",nextDate);

        //   this.daysInMonth.push(new Date(nextDate));

        //   var tod = this.returnData(new Date(nextDate)); //获取完整日期
        //    let dayobject = {
        //     // d: tod,
        //         data: tod,
        //         day: d.getDate(),
        //         isThisMonth: d.getMonth() + 1 == that.currentMonth ? true : false,
        //         // isToDay: isToday(tod),
        //         // isSign: that.isVerDate(d),
        //         score:0,
        //     // propsAttr: that.copyAttr(d, that.dataList),
        //     }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
        // //this.daysInMonth.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
        //     console.log("dayobject",dayobject);
        }
        
        // daysList.push(dayobject);

      },
      //获取完整日期
        returnData (d) {
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var day = d.getDate();
            var m = month >= 10 ? month : "0" + month;
            var daa = day >= 10 ? day : "0" + day;
            return year + "-" + m + "-" + daa;
        },
      isCurrentMonth(date) {
        return date.getMonth() === this.currentMonth;
      },
      prevMonth() {
        if (this.currentMonth === 0) {
          this.currentMonth = 11;
          this.currentYear -= 1;
        } else {
          this.currentMonth -= 1;
        }
        this.generateDaysInMonth();
      },
      nextMonth() {
        if (this.currentMonth === 11) {
          this.currentMonth = 0;
          this.currentYear += 1;
        } else {
          this.currentMonth += 1;
        }
        this.generateDaysInMonth();
      }
    },
    mounted() {
      this.generateDaysInMonth();
    }
  };
  </script>
  
  <style scoped>
  .calendar {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
  }
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .calendar-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: #333;
  }
  
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }
  
  .calendar-day-name,
  .calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    min-height: 40px;
  }
  
  .calendar-day-name {
    background-color: #f8f8f8;
    font-weight: bold;
  }
  
  .not-current-month {
    color: #ccc;
    background-color: #f5f5f5;
  }
  
  .calendar-day:hover {
    background-color: #f0f8ff;
  }
  </style>
  